<template>

  <el-dialog :visible.sync='visible' title="转移分类" width='700px'
             @open="openDialog"
             @close='closeDialog'>

    <el-row>
      <!-- 左侧穿梭框 原料框 -->
      <el-col :span="10">
        <div class="transfer-left">
          <div class="transfer-title">
            <span>要转移的分类</span>
          </div>
          <!-- 内容区 -->
          <div class="transfer-main">
            <el-tree
              node-key="id"
              ref="fromTree"
              show-checkbox
              :data="fromTree"
              :props="{label: 'name'}"
              accordion check-strictly
              @check="fromTreeCheckNode" />
          </div>
        </div>
      </el-col>
      <el-col :span="4">
        <!-- 穿梭区 按钮框 -->
        <div class="transfer-center">
          <template>
            <p class="transfer-center-item">
              <el-button
                type="primary"
                icon="el-icon-arrow-right"
                circle title="迁移左侧选中节点"
                @click="transferToRight"
              ></el-button>
            </p>
            <p class="transfer-center-item">
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                circle title="撤销所有转移"
                @click="redoTransfer"
              ></el-button>
            </p>
          </template>
        </div>
      </el-col>
      <el-col :span="10">
        <!-- 右侧穿梭框 目标框 -->
        <div class="transfer-right">
          <div class="transfer-title">
            <span>转移到的分类</span>
          </div>
          <!-- 内容区 -->
          <div class="transfer-main">
            <el-tree
              node-key="id"
              ref="toTree"
              show-checkbox
              :data="toTree"
              :props="{label: 'name', disabled: getNodeDisabled}"
              accordion check-strictly
              @check="toTreeNodeCheck" />
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="dialog-footer" slot="footer">
      <el-button @click='visible = false'>取 消</el-button>
      <el-button @click="submit" type="primary">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

  export default {
    name: 'TransferTagDialog',
    props: ['selectedTopTag', 'selectedSubTag'],
    data() {
      return {
        visible: false,
        selectedTopTagBak: {},
        fromTree:[],
        toTree:[],
      }
    },
    methods: {
      getNodeDisabled(data){
        return data.transferFlag
      },
      redoTransfer(){
        this.openDialog()
      },
      transferToRight(){
        let fromTreeCheckedNodes = this.$refs.fromTree.getCheckedNodes();
        if (fromTreeCheckedNodes.length === 0) {
          this.$message.warning("请选择要转移的分类")
          return
        }
        let toTreeCheckedNodes = this.$refs.toTree.getCheckedNodes();
        // if (toTreeCheckedNodes.length === 0) {
        //   this.$message.warning("请选择转移到的分类")
        //   return
        // }
        // 把左侧选中节点的一号元素转移到右侧即可, 子节点自动挂载到一号元素下;
        this.$refs.fromTree.remove(fromTreeCheckedNodes[0])
        this.$refs.toTree.remove(fromTreeCheckedNodes[0])
        // 如果右侧选中了节点, 则转移到选中节点下;
        if (toTreeCheckedNodes.length > 0) {
          this.$refs.toTree.append(fromTreeCheckedNodes[0], toTreeCheckedNodes[0])
          // 展开节点
          this.$refs.toTree.store.nodesMap[toTreeCheckedNodes[0].id].expanded = true;
        }
        // 如果右侧树未选中任何节点, 则添加到右侧列表最后一个元素
        else {
          this.$refs.toTree.insertAfter(fromTreeCheckedNodes[0], this.toTree[this.toTree.length - 1])
        }
      },
      fromTreeCheckNode(data, checkedOri){
        for (let i = 0; i < checkedOri.checkedNodes.length; i++) {
          let checkedNode = checkedOri.checkedNodes[i]
          if (checkedNode !== data) {
            this.$refs.fromTree.setChecked(checkedNode, false)
          }
        }
        this.recursiveCheckNode(data)
      },
      recursiveCheckNode(node) {
        this.$refs.fromTree.setChecked(node, true, true)
        node.children.forEach(node => this.recursiveCheckNode(node))
      },
      toTreeNodeCheck(data, checkedOri){
        for (let i = 0; i < checkedOri.checkedNodes.length; i++) {
          let checkedNode = checkedOri.checkedNodes[i]
          if (checkedNode !== data) {
            this.$refs.toTree.setChecked(checkedNode, false)
          }
        }
      },
      submit(){
        let param = new URLSearchParams()
        param.append("tag", JSON.stringify(this.selectedTopTagBak))
        this.axios.post('/pmph/action/tag/transferTag', param).then(() => {
          this.$emit('transfer')
          this.$store.dispatch('setTagTree')
          this.closeDialog()
        })
      },
      openDialog(){
        // 深拷贝;
        this.selectedTopTagBak = JSON.parse(JSON.stringify(this.selectedTopTag))
        let cntTree = this.selectedTopTagBak.children
        let cntRow = UTIL.findTreeNode(cntTree, item => item.id === this.selectedSubTag.id)
        this.fromTree = [cntRow]
        // 左侧树节点都加上标记
        UTIL.recursiveForEachTreeNode(this.fromTree, item => item.transferFlag = true)
        this.toTree = cntTree
      },
      closeDialog(){
        this.visible = false
      }
    },
  }
</script>

<style scoped lang="scss">
  /deep/ .el-dialog__body {
    padding: 0px 20px;
  }
  /deep/ .el-tree {
    min-width: 100%;
    display: inline-block !important;
  }
  .transfer-main {
    overflow: auto;
    height: 350px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  .transfer-left, .transfer-right {
    border: 1px solid #C9C9C9;
    border-radius: 10px;
  }
  .transfer-center {
    margin-top: 100px;
    text-align: center;
  }
  .transfer-title {
    background: #F0F8F8;
    font-size: 20px;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
</style>
